<template>
  <!--头部-->
  <div class="mocks-header">
    <div class="header-left">
      <h1 class="hd-logo"><img src="../../assets/images/logo.png" alt=""></h1>
      <div class="hd-topic">{{name}}</div>
    </div>
    <div class="header-center" v-if="showHeaderPart">
      <span class="hd-part">Part {{currentPart}} Of {{totalPart}}</span>
    </div>
    <div class="header-right" v-if="showHeaderPart">
      <span class="timer" v-html="showTime"></span>
      <a href="javascript:;"
         class="layui-btn layui-btn-primary icon-back"
         @click.prevent="prevBtnClick"
         :class="{'layui-btn-disabled': disablePrevBtn}">
        BACK
      </a>
      <a href="javascript:;"
         class="layui-btn layui-btn-primary icon-next"
         @click.prevent="nextBtnClick"
         :class="{'layui-btn-disabled': disableNextBtn}">
        {{ nextBtnText }}
      </a>
    </div>
  </div>
</template>
<script>
  import { mapState, mapActions } from 'vuex';

  export default {
    name: "MocksHeader",
    props: {
      testTime: 0,
      name: String
    },
    data () {
      return {
        inv: null,
        totalTime: 0,
        routerName: '',
      };
    },
    destroyed() {
      clearInterval(this.inv);
    },
    watch: {
      testTime (val) {
        this.totalTime = val;
      }
    },
    computed: {
      ...mapState([
        'disablePrevBtn',
        'disableNextBtn',
        'partInfo',
        'totalPart',
        'currentPart',
        'showHeaderPart'
      ]),
      nextBtnText () {
        let routerName = this.$route.name;
        let isQuestion = (routerName === 'MocksQuestion' || routerName === 'MocksSpeakQuestion');
        if (routerName == 'MocksQuestion') {
          if (this.currentPart == this.totalPart)
            return 'SUBMIT';
        } else if(routerName === 'MocksSpeakQuestion') {
          let questionNum = this.$route.params.questionNum;
          questionNum = parseInt(questionNum);
          if (this.currentPart == this.totalPart && this.partInfo
              && this.partInfo.question_list && this.partInfo.question_list.length == questionNum) {
            return 'SUBMIT';
          }
        }
        return 'NEXT';
      },
      showTime() {
        let hour = Math.floor(this.totalTime / 3600);
        let hourStr = hour > 9 ? hour + '' : '0' + hour;
        let min = Math.floor((this.totalTime % 3600) / 60);
        let minStr = min > 9 ? min + '' : '0' + min;
        let soc = Math.floor(this.totalTime % 60);
        let socStr = soc > 9 ? soc + '' : '0' + soc;
        return `<i>${hourStr}</i><i>${minStr}</i><i>${socStr}</i>`;
      }
    },
    methods: {
      prevBtnClick () {
        if (!this.disablePrevBtn) {
          window.history.back();
          this.$emit('prevClick');
        }
      },
      nextBtnClick () {
        if (!this.disableNextBtn) {
          this.$emit('nextClick');
        }
      },
      startMocks () {
        this.inv = setInterval(() => {
          if(this.totalTime > 0) {
            this.totalTime --;
          }
          if (this.totalTime <= 0) {
            clearInterval(this.inv);
            this.$emit('timeOver');
          }
        }, 1000);
      }
    }
  }
</script>
<style scoped>
</style>
